<template>
  <div class="list">
    <div class="item" v-for="item in espressoDetails?.details || []" :key="item.id">
      <EspressoItem :iceData="item" />

      <div class="btn-list">
        <el-button type="primary" circle @click="removeFromCart(item.id)">-</el-button>
        <span>{{ item.quantity || 0 }}</span>
        <el-button type="primary" circle @click="addToCart(item.id)">+</el-button>
      </div>
    </div>
  </div>
</template>


<script>
import EspressoItem from './EspressoItem.vue';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
  name: "EspressoList",
  data() {
    return {
      Espresso:[]
    };
  },
  components: {
    EspressoItem,
  },
  computed: {
    ...mapState({
      coffees: state => state.coffees,
    }),
    espressoDetails() {
      return this.coffees.find(coffee => coffee.id === '2');
    }
  },
    mounted(){
    this.getlist();
  },
methods: {
  getlist: function() {
    this.$axios.get('/coffees/coffees', {
      params: {
        id: 2
      }
    })
    .then(response => {
      this.Espresso = response.data[0].details;
      console.log(this.Espresso)
    })
  },
  ...mapMutations({
      addToCart: 'addToCart',
      removeFromCart: 'removeFromCart',
    }),
    ...mapActions(['fetchCoffees']),
},
created() {
    this.fetchCoffees();
  }
};
</script>

<style>
.list {
  display: flex;
  justify-content: space-around;
}

.img-wrap {
  width: 250px;
  height: auto;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-list {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

